<template>
  <section class="product-showcase">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-semibold text-gray-800">{{ title }}</h2>
      <a
        href="#"
        class="text-sm text-gray-500 hover:text-purple-600 transition-colors"
        >查看更多 &gt;</a
      >
    </div>
    <div class="grid grid-cols-5 gap-4">
      <!-- Left Product -->
      <div class="col-span-2" v-if="products && products.length > 0">
        <ProductCard :product="products[0]" size="2x2" />
      </div>
      <!-- Right Products -->
      <div class="col-span-3 grid grid-cols-3 gap-4">
        <template v-if="products && products.length > 0">
          <ProductCard
            v-for="product in products.slice(1, 4)"
            :key="product.id"
            :product="product"
            size="1x1"
          />
        </template>
      </div>
    </div>
    <div class="grid grid-cols-5 gap-4 mt-4" v-if="products && products.length > 0">
      <!-- Right Products -->
      <div class="col-span-3 grid grid-cols-3 gap-4">
        <template v-if="products && products.length > 5">
          <ProductCard
            v-for="product in products.slice(5, 9)"
            :key="product.id"
            :product="product"
            size="1x1"
          />
        </template>
      </div>
      <!-- Left Product -->
      <div class="col-span-2" v-if="products && products.length > 9">
        <ProductCard :product="products[9]" size="2x2" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import ProductCard from "./ProductCard.vue";
import type { DisplayGoods } from "@/views/HomeView.vue";

defineProps<{
  title: string;
  featuredProduct: DisplayGoods | null;
  products: DisplayGoods[];
}>();
</script>
